<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页面</title>
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
</head>

<style>
    html,
    body,
    #app,
    .el-container {
        padding: 0px;
        margin: 0px;
        height: 100%;
        font-size: 12px;
    }

    .el-header {
        background-color: #409EFF;
        color: white;
        line-height: 60px;
    }

    .el-aside {
        background-color: #303133;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        min-width: 200px;
        min-height: 400px;
    }

    .user_info1 {
        margin: 10px auto 10px 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>

<body>
    <main id="app">
        <el-container>
            <el-header>
                <img src="../images/nnblog_logo.png" alt="" height="60px;">
            </el-header>
            <el-container>
                <el-aside>
                    <transition name="user-info1">
                        <div class="user_info1" v-if="showSmall==true">
                            <div>
                                <img src="../images/login_logo.jpg" width="50px" height="55px"
                                    style="border-radius: 50px;">
                            </div>
                            <div style="margin-left:20px;">
                                <el-button type="success" icon="el-icon-s-home" size="mini" circle></el-button>
                                <el-button type="warning" icon="el-icon-location" size="mini" circle></el-button>
                                <el-button type="info" icon="el-icon-s-tools" size="mini" circle></el-button>
                                <el-button type="danger" icon="el-icon-arrow-down" size="mini" circle
                                    v-on:click="showSmall=!showSmall" style="margin-left:40px;"></el-button>
                            </div>
                        </div>
                    </transition>
                    <transition name="user-info2">
                        <div class="user_info2" v-if="showSmall==false">
                            <img src="../images/login_logo.jpg" width="100px" height="110px"
                                style="border-radius: 50px;margin-top:20px;">
                            <div style="color:white;font-size:15px;font-weight:bold;margin:10px auto 5px auto;">皇家小狼
                            </div>
                            <div style="color:wheat;margin:0px auto 20px auto">妈妈，俺要吃烤山药</div>
                            <el-button type="success" icon="el-icon-s-home" circle></el-button>
                            <el-button type="info" icon="el-icon-picture" circle></el-button>
                            <el-button type="warning" icon="el-icon-location" circle></el-button>
                            <el-button type="danger" icon="el-icon-s-tools" circle></el-button>
                            <div style="margin-top:40px;">
                                <el-button type="danger" icon="el-icon-arrow-up" size="mini" circle
                                    v-on:click="showSmall=!showSmall"></el-button>
                            </div>
                        </div>
                    </transition>
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        background-color="#303133" text-color="white" style="width:280px;margin-top:20px;border:0px;">
                        <el-submenu index="1" style="text-align: left;">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>用户信息管理模块</span>
                            </template>
                            <el-menu-item index="1-1">
                                <el-link :underline="false" type="primary" href="/views/userManager.html" target="mainPage">用户信息管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="1-1">角色信息管理</el-menu-item>
                            <el-menu-item index="1-1">权限信息管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2" style="text-align: left;">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span>字典信息维护模块</span>
                            </template>
                            <el-menu-item index="2-1">行政区划信息管理</el-menu-item>
                            <el-menu-item index="2-1">爱好信息管理</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <iframe src="./welcome.html" name="mainPage" style="margin:0;border:0;width:100%;height:90%"></iframe>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </main>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/element-ui/lib/index.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                isCollapse: true,
                showSmall: true,
                userInfo: {
                    imageUrl: '../images/login_logo.jpg',
                }
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });
</script>

</html>